<template>
  <div>
    <div class="pb10px">
      <el-form ref="searchForm" :model="searchForm" inline>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="searchForm.username" clearable></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="searchForm.sex" placeholder="请选择" clearable>
            <el-option label="男" value="1"/>
            <el-option label="女" value="0"/>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" icon="el-icon-search" class="mr10px" @click="handleSearch">搜索</el-button>
          <el-button type="primary" @click="handleAdd" icon="el-icon-plus">新增</el-button>
          <el-button type="danger" size="small" icon="el-icon-remove-outline" @click="batchDelete(null)" :disabled="selectionRows.length<=0">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table ref="multipleTable" :data="listData" tooltip-effect="dark" style="width: 100%" @selection-change="selectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="avatar" label="头像">
        <template slot-scope="scope">
          <el-image style="width: 50px; height: 50px" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="sex" label="性别">
        <template slot-scope="scope">{{ scope.row.sex === '1' ? '男' : '女' }}</template>
      </el-table-column>
      <el-table-column prop="birth" label="出生日期"></el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status === 1">正常</el-tag>
          <el-tag type="danger" v-if="scope.row.status === 2">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="260" fixed="right">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit-outline" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button icon="el-icon-remove-outline" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-pagination @current-change="currentChange" @size-change="sizeChange" :page-sizes="pageSizes" :page-size="pageInfo.pageSize" :current-page="pageInfo.currentPage" background layout="sizes, prev, pager, next" :total="pageInfo.total">
      </el-pagination>
    </div>
    <el-drawer :title="formData.id ? '编辑' : '新增'" :visible.sync="isDrawerDialog" size="400px" direction="rtl" :wrapper-closable="false" :before-close="closeDrawer">
      <div class="demo-drawer_content" style="padding-right: 40px;box-sizing: border-box">
        <el-form :model="formData" label-width="100px" class="demo-ruleForm">
          <slot name="content">
            <el-form-item label="头像" prop="avatar">
              <el-upload class="avatar-uploader" :action="$httpUploadFile" :show-file-list="false" :on-success="uploadImgSuccess">
                <img v-if="formData.avatar" :src="formData.avatar" alt="" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="用户名" prop="username">
              <el-input v-model="formData.username" placeholder="用户名" :disabled="formData.id != null"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
              <el-input v-model="formData.phone" placeholder="电话"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-select v-model="formData.sexDisplay" placeholder="请选择">
                <el-option label="男" value="1"/>
                <el-option label="女" value="0"/>
              </el-select>
            </el-form-item>
            <el-form-item label="出生日期" prop="birth">
              <el-date-picker v-model="formData.birth" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <el-input v-model="formData.address" placeholder="地址"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="formData.status" placeholder="请选择">
                <el-option label="正常" :value="1"/>
                <el-option label="禁用" :value="2"/>
              </el-select>
            </el-form-item>
          </slot>
        </el-form>
      </div>
      <div class="demo-drawer_footer" style="display: flex; justify-content: space-around;">
        <el-button @click="closeDrawer" icon="el-icon-close">取消</el-button>
        <el-button type="primary" @click="submitDrawer" icon="el-icon-check">提交</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //抽屉控制
      isDrawerDialog: false,
      //列表数据
      listData: [],
      //分页详情
      pageInfo: {
        //当前页
        pageNum: 1,
        //分页大小
        pageSize: 10,
        //总条数
        total: 0,
      },
      //搜索
      searchForm: {
        name: ""
      },
      //删除数据的id
      selectionRows: [],
      formData: {},
      pageSizes: [5, 10, 20, 30]
    }
  },
  created() {
    this.getPageList();
  },
  methods: {
    getPageList() {
      let data = Object.assign(this.searchForm, this.pageInfo);
      this.request.get("/user/page", { params: data }).then(res => {
        this.listData = res.data.list;
        this.pageInfo.total = res.data.total;
      });
    },
    //选择分页
    currentChange(e) {
      this.pageInfo.pageNum = e;
      this.getPageList();
    },
    //改变分页数量
    sizeChange(e) {
      this.pageInfo.pageSize = e;
      this.getPageList();
    },
    //搜索
    handleSearch() {
      this.pageInfo.pageNum = 1;
      this.getPageList();
    },
    //关闭抽屉
    closeDrawer() {
      this.isDrawerDialog = false;
    },
    //提交数据
    submitDrawer() {
      const submitData = {...this.formData};
      // 将性别从汉字转换为数字
      submitData.sex = parseInt(submitData.sexDisplay);

      //新增
      if (!this.formData.id) {
        this.request.post("/user", submitData).then(res => {
          console.log(res);
          if (res.code === 200) {
            this.isDrawerDialog = false;
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.getPageList();
          }
        })
      } else {
        //更新
        this.request.put("/user", submitData).then(res => {
          console.log(res);
          if (res.code === 200) {
            this.isDrawerDialog = false;
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.getPageList();
          }
        })
      }
    },
    //添加数据
    handleAdd() {
      this.isDrawerDialog = true;
      this.formData = {};
    },
    //编辑
    handleEdit(index, row) {
      this.isDrawerDialog = true;
      console.log(index, row);
      this.formData = {...row};
      // 将性别从数字转换为汉字
      this.formData.sexDisplay = this.formData.sex.toString();
    },
    selectionChange(rows) {
      this.selectionRows = rows;
    },
    //单个删除
    handleDelete(index, row) {
      this.batchDelete([row]);
    },
    uploadImgSuccess(res) {
      this.$set(this.formData, "avatar", res.data.url)
    },
    //批量删除
    batchDelete(rows) {
      if (!rows) {
        rows = this.selectionRows;
      }
      let ids = rows.map(item => item.id);
      this.$confirm(`此操作将永久删除ID为[${ids}]的数据, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        //批量删除数据
        this.request.delete("/user", {data: ids}).then(res => {
          if (res.code === 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.getPageList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
        this.$refs.multipleTable.clearSelection();
      });
    },
  }
}
</script>

<style scoped>
.avatar-uploader {
  text-align: center;
  padding-bottom: 10px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  border: 1px solid #ccc;
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>


